<template>
	<MyPage title="添加配件/服务" :isback="true">
		<view slot="right"><u-button type="error" size="mini" @click="formSubmit">保存并返回</u-button></view>
		<view slot="gBody">
			<u-form ref="uForm">
				<view class="view-box" v-for="(item,index) in dataList" :key="index">
					<view class="close-icon" @click="removeSpecifications(index)" v-if="index>0">
						<u-icon name="close" color="#fff" size="24"></u-icon>
					</view>
					<u-form-item labelWidth="150" label="" :borderBottom="false" class="type-title">
						<u-input v-model="dataList[index].type" placeholder="请输入类别，如配件、服务..." maxlength="20" :trim="true" />
						<u-button size="mini" type="error" plain class="right-btn" solt="right" @click="typeAdd(index)" style="margin-right:20rpx">+</u-button>
					</u-form-item>
					<u-form-item labelWidth="150" :borderBottom="false" v-for="(child,childIndex) in item.typeList" :key="childIndex" class="type-list">
						<u-input :value="inputValue(child)" placeholder="请点击添加..." :trim="true" disabled @click="inputClick(index,childIndex)" />
						<u-button size="mini" plain class="right-btn" solt="right" @click="typeReduce(index,childIndex)" v-if="childIndex>0">-</u-button>
					</u-form-item>
				</view>
				<view class="view-box add-specifications red" @click="addParts">+添加</view>
			</u-form>
			
			<u-popup mode="bottom" v-model="show">
				<view class="pop-box">
					<view class="title">添加内容</view>
					<u-form :model="popForm" ref="popForm">
						<u-form-item labelWidth="120" label="名称" prop="name" required>
							<u-input v-model="popForm.name" placeholder="请输入名称" maxlength="20" :trim="true" />
						</u-form-item>
						<u-form-item labelWidth="120" label="价格" prop="price" required>
							<u-input type="number" v-model="popForm.price" placeholder="请输入价格" maxlength="10" :trim="true" />
							<text class="black" slot="right">元</text>
						</u-form-item>
						<u-checkbox v-model="popForm.multiple" shape="circle" class="checked">可以加购多个</u-checkbox>
						<MyBtn title="保存" class="btn" @click="popSubmit"></MyBtn>
					</u-form>
				</view>
			</u-popup>
		</view>
	</MyPage>
</template>		

<script>
import mixin from "@/libs/mixin.js";
import { savediy } from '@/api/my.js'
export default {
	mixins: [mixin],
	data() {
		return {
			dataList:[
				{
					type:'配件',
					typeList: [
						{name:'',price:'',multiple:false},
						{name:'',price:'',multiple:false}
					]
				}
			],
			show:false,
			curIndex:"",
			curChildIndex:"",
			popForm:{
				name:'',
				price:'',
				multiple:false
			},
			popRules:{
				name: [
					{
						required: true,
						message: '请填写名称',
						trigger: ['change','blur']
					}
				],
				price: [
					{
						required: true,
						message: '请填写价格',
						trigger: ['change','blur']
					}
				]
			}
		}
	},
	computed:{
		//列表内容计算
		inputValue(){
			return function(child){
				if( child.name && child.price ){
					console.log(child);
					return child.name + '　+' + child.price + '元' + (child.multiple?' (多选)':'');
				}else{
					return '';
				}
			}
		}
	},
	onLoad() {
	},
	onReady() {
	},
	methods: {
		//添加和删除分类内容
		typeAdd(index) {
			this.dataList[index].typeList.push("");
		},
		typeReduce(index,childIndex) {
			this.$delete(this.dataList[index].typeList,index);
		},
		//添加和删除配件/服务
		addParts(){
			if( this.dataList.length<5 ){
				this.dataList.push({
					type:'',
					typeList: [
						{name:'',price:'',multiple:false},
						{name:'',price:'',multiple:false}
					]
				});
			}else{
				uni.showToast({
					title: '最多只能添加5种配件/服务！',
					icon:'none'
				})
			}
		},
		removeSpecifications(index){
			this.$delete(this.dataList,index);
		},
		//inupt点击
		inputClick(index,childIndex){
			this.show = true;
			this.curIndex = index;
			this.curChildIndex = childIndex;
			setTimeout(()=>{
				this.$refs.popForm.setRules(this.popRules);
			},0);
		},
		//单项添加
		popSubmit(){
			this.$refs.popForm.validate(valid => {
				if (valid) {
					this.dataList[this.curIndex].typeList[this.curChildIndex].name = this.popForm.name;
					this.dataList[this.curIndex].typeList[this.curChildIndex].price = this.popForm.price;
					this.dataList[this.curIndex].typeList[this.curChildIndex].multiple = this.popForm.multiple;
					this.form = {
						name:'',
						price:'',
						multiple:false
					}
					this.show = false;
				};
			});
		},
		// 提交登录
		formSubmit(){
			if (1) {
				this.$utils.navigateTo('/diy/goods-add/goods-add');
				// savediy(this.form).then(res=>{
				// 	if(res.list.err == 0){
				// 		this.$utils.switchTab('/my/my');
				// 	}else{
				// 		uni.showToast({
				// 			title: res.list.msg,
				// 			icon:'none'
				// 		})
				// 	}
				// }).catch(err=>{
				// 	uni.showToast({
				// 		title: res.msg,
				// 		icon:'none'
				// 	})
				// });
			}
		}
	}
}
</script>

<style lang="scss">
page{
	background:#f3f3f3;
}
</style>
<style lang="scss" scoped>
.view-box{
	position: relative;
	margin-top:15rpx;
	background: #fff;
	padding: 30rpx 40rpx;
	border-radius: 20rpx;
	.close-icon{
		position:absolute;
		right:0;
		top:0;
		line-height: 1.1em;
		padding:5rpx 6rpx 12rpx 16rpx;
		background: #ccc;
		border-radius: 0 0 0 40rpx;
	}
	.type-title{
		padding:0 0 10rpx;
		/deep/ .u-input__input{
			font-size:30rpx;
			border-bottom: 1px #f1f1f1 solid;
		}
	}
	.type-list{
		border-radius: 15rpx;
		border-bottom: none;
		margin-bottom:8rpx;
		padding: 0 20rpx;
		background:#f1f1f1;
	}
	.title{
		font-weight: bold;
		.right{
			font-size:24rpx;
			font-weight: normal;
		}
	}
}
.add-specifications{
	padding:22rpx 0;
	text-align: center;
	font-size: 24rpx;
}
.pop-box .checked /deep/ .u-checkbox__label{
	font-size: 28rpx;
	color:#666;
}


.btn-view{
	height:180rpx;
	.btn{
		position:fixed;
		left:4%;
		bottom:30rpx;
		z-index:10;
		width:92%;
	}
}
</style>